<template>
  <div class="admin-product-check">
    <el-card>
      <template #header>
        <div class="card-header">商品审核管理</div>
      </template>

      <el-tabs v-model="activeTab" @tab-change="fetchProductList">
        <el-tab-pane label="待审核" name="pending" />
        <el-tab-pane label="审核通过" name="approved" />
        <el-tab-pane label="审核未通过" name="rejected" />
      </el-tabs>

      <el-table :data="productList" v-loading="loading" border stripe row-key="productId">
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="productBrand" label="品牌" />
        <el-table-column prop="productPrice" label="价格" />
        <el-table-column prop="productCount" label="库存" />
        <el-table-column prop="productArea" label="产地" />
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <template v-if="activeTab === 'pending'">
              <el-button type="success" size="small" @click="handleCheckPass(row)">通过</el-button>
              <el-button type="warning" size="small" @click="handleCheckFail(row)">拒绝</el-button>
            </template>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { productcheckAPI } from '@/http'

const activeTab = ref('pending')
const productList = ref<any[]>([])
const loading = ref(false)

// 获取对应商品列表
const fetchProductList = async () => {
  loading.value = true
  try {
    let res
    if (activeTab.value === 'pending') {
      res = await productcheckAPI.getAllProductList()
    } else if (activeTab.value === 'approved') {
      res = await productcheckAPI.getAllPassProductList()
    } else if (activeTab.value === 'rejected') {
      res = await productcheckAPI.getAllFailProductList()
    }
    productList.value = Array.isArray(res?.data) ? res.data : []
  } catch (e) {
    ElMessage.error('商品数据获取失败')
  } finally {
    loading.value = false
  }
}

// 审核通过
const handleCheckPass = async (row: any) => {
  const id = row?.productId
  if (!id) {
    ElMessage.error('商品ID无效')
    console.error('审核通过出错，row 为：', row)
    return
  }
  try {
    await productcheckAPI.checkProduct(id)
    ElMessage.success('审核通过')
    fetchProductList()
  } catch {
    ElMessage.error('操作失败')
  }
}

// 审核拒绝
const handleCheckFail = async (row: any) => {
  const id = row?.productId
  if (!id) {
    ElMessage.error('商品ID无效')
    console.error('审核拒绝出错，row 为：', row)
    return
  }
  try {
    await productcheckAPI.unCheckProduct(id)
    ElMessage.success('审核已拒绝')
    fetchProductList()
  } catch {
    ElMessage.error('操作失败')
  }
}

// 删除商品
const handleDelete = async (row: any) => {
  const id = row?.productId
  if (!id) {
    ElMessage.error('商品ID无效')
    console.error('删除出错，row 为：', row)
    return
  }
  try {
    await ElMessageBox.confirm('确认要删除该商品吗？', '提示', { type: 'warning' })
    await productcheckAPI.deleteProduct(id)
    ElMessage.success('删除成功')
    fetchProductList()
  } catch {
    ElMessage.info('已取消删除')
  }
}

onMounted(fetchProductList)
</script>

<style scoped>
.admin-product-check {
  padding: 24px;
}
.card-header {
  font-weight: bold;
  font-size: 18px;
}
</style>
